<template>
  <div>
    <div class="header">
      <div class="title"><text>教室管理</text></div>
      
      <el-button type="primary" class="el-icon-circle-plus-outline" size="small" style="margin-left: 40px;"
        @click="dialogFormVisible = true">添加教室
      </el-button>
      
      <input type="text" placeholder=" 输入教室"
      v-model="queryinfo.name"
        style="margin-left: 20px; background-color: rgb(233, 237, 240); border: 1px solid #999; border-right:none; height: 28px;">
      <button class="el-icon-search"
        style="border: 1px solid #999; border-left: none; height: 30px; width: 40px;" @click="classlist"></button>
    </div>
    <!-- 列表 -->
    <el-card class="box-card">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="name" label="教室名称" width="180">
        </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button
              size="mini"
              @click="getupdate(scope.row)"
              >编辑</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="getdelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="queryinfo.page"
      :page-sizes="[1, 2, 3,]"
      :page-size="queryinfo.psize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
    </el-card>
  </div>
  <!-- 添加 -->
  <el-dialog title="添加教室" v-model="dialogFormVisible">
    <el-form ref="form" :rules="rules" :model="form">

      <el-form-item label="教室名称" prop="name" :label-width="formLabelWidth">
        <el-input v-model="form.name" style="margin-right: 150px; width: 300px;" size="small" autocomplete="off">
        </el-input>
      </el-form-item>

    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitinsert('form')">确 定</el-button>
      </span>
    </template>

  </el-dialog>
  <!-- 修改 -->
  <el-dialog title="添加教室" v-model="dialogFormVisibleupdate">
    <el-form ref="formupdate" :rules="rules" :model="form">

      <el-form-item label="教室名称" prop="" :label-width="formLabelWidth">
        <el-input v-model="update.name" style="margin-right: 150px; width: 300px;" size="small" autocomplete="off">
        </el-input>
      </el-form-item>

    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisibleupdate = false">取 消</el-button>
        <el-button type="primary" @click="updatex('formupdate')">确 定</el-button>
      </span>
    </template>

  </el-dialog>
</template>
<script>
  export default {
    data() {
      return {
        dialogFormVisibleupdate:false,
        dialogFormVisible: false,
        tableData:[],
        queryinfo:{
          page:1,
          psize:3,
          name:''
        },
        total:0,
        form:{
            name:''
        },
        update:{
          id:'',
          name:''
        },
        rules:{
            name:[
            {
              required: true,
              message: '请输入教师名称',
              trigger: 'blur'
            },
            {
              min: 2,
              max: 10,
              message: '长度在 2 到 10 个字符',
              trigger: 'blur'
            }
            ]
        }
      }
    },
    created(){
      this.classlist()
    },
    methods: {
      // 修改
      getupdate(val){
       console.log(val)
       this.dialogFormVisibleupdate=true
       this.update.id=val.id 
       console.log(this.update.id)
       this.tableData.forEach(item=>{
         if(val.id==item.id){
           this.update.name=item.name
         }
        // console.log(this.update)
       })
      },
      async updatex(){
        const {data:res} = await this.$http.post('http://www.eshareedu.cn/edusystems/api/classrooms/add',this.update)  
        // console.log(res) 
        if(res.errCode==10000){
          this.$message.success('修改成功')
          this.dialogFormVisibleupdate=false
          this.classlist()
        }else{
          this.$message.error('修改失败')
        }
      },
      // 分页
      handleSizeChange(val) {
        this.queryinfo.psize=val
        this.classlist()
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        this.queryinfo.page=val
        this.classlist()
        console.log(`当前页: ${val}`);
      },
        async classlist(){
        let self = this
        const {data: res } = await this.$http.get('http://www.eshareedu.cn/edusystems/api/classrooms/list',{params:this.queryinfo})
        // console.log(res)
        if (res.errCode == '10000') {
          this.tableData = res.data.list
          this.total=res.data.counts
        }
      },
    //   添加
       async submitinsert(){
        let token = window.sessionStorage.getItem('access_token')
        // console.log(token)
        const {
          data: res
        } = await this.$http.post('http://www.eshareedu.cn/edusystems/api/classrooms/add',this.form,{ headers: {token}})
        // console.log(res)
        if(res.errCode != '10000'){
           this.$message.error('添加失败')
        }else{
          this.$message.success('添加成功')
          this.dialogFormVisible = false,
          this.classlist()
        }
       },
      //  单条删除
      async getdelete(row){
        //  console.log(row)
         const cath = await this.$confirm('确定要删除这条数据吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch(error => {
          return error
        })
        // console.log(cath)
        if(cath=='confirm'){
            let self=this
            const {data:res} = await this.$http.get('http://www.eshareedu.cn/edusystems/api/classrooms/delete?id='+row.id)
            // console.log(res)
            if(res.errCode==10000){
                self.$message.success('删除成功')
                self.classlist()
            }
        }
        if(cath=='cancel'){
            this.$message.info('已取消删除')
        }

       }
    }
  }

</script>
<style scoped>
  .header {
    width: 100%;
    display: flex;
    height: 50px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    box-shadow: 1px 1px 3px 1px rgb(200, 226, 241);
    background-color: rgb(233, 237, 240);
    align-items: center;
  }

  .title {
    font-size: 15px;
    font-weight: bold;
    margin-left: 20px;
  }

</style>
